/**
 * Created by xlt on 2017/6/7.
 */
import React, {PropTypes} from "react";
import {Color} from "../../utils/baseColor";


class joinStoreSuccess extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            userType: 0,
            shopName:"",
            userName:""
        }
    }

    componentWillMount() {
        document.body.style.background = Color.BACKGROUND_COLOR;
        document.title = "成功加入店铺";
    }

    componentDidMount() {
        const query = this.props.location.query;
        this.setState({userType: query.userType,shopName: query.shopName,userName: query.userName});
    }

    DisplayJoinStoreSuccess() {
        if (this.state.userType == 3) {
            return (
                <div>
                    <div className="joinStoreSuccess-all-position">
                        <div className="joinStoreSuccess-image-div">
                        </div>
                        <div className="joinStoreSuccess-p">
                            <p>成功加入店铺</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-ul">
                        <p className="p-first">您好，{this.state.userName}，您已成功加入你所在店铺"{this.state.shopName}"。</p>
                        <p className="p-two-success">关注公众号“叮叮来钱”，您可以：</p>
                        <div className="p-inside-div">
                            <p>1.查询导出订单;</p>
                            <p>2.查看每一天的交易流水记录;</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-div-end">
                        <div><img width="150" height="150"
                                  src="http://oeb6w1s1c.bkt.clouddn.com/170612174014111298109079.png" alt=""/></div>
                        <div className="joinStoreSuccess-div-end-two">
                            <p>长按识别二维码,来到叮叮来钱</p>
                        </div>
                    </div>
                </div>
            )
        } else if (this.state.userType == 1) {
            return (
                <div>
                    <div className="joinStoreSuccess-all-position">
                        <div className="joinStoreSuccess-image-div">
                        </div>
                        <div className="joinStoreSuccess-p">
                            <p>成功入驻叮叮来钱</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-ul">
                        <p className="p-first">您好，{this.state.userName}，您已成功加入公众号“叮叮来钱”。</p>
                        <p className="p-two-success">关注公众号“叮叮来钱”，您可以：</p>
                        <div className="p-inside-div">
                            <p>1.可查看每个店铺每一天的交易收入,流水记录;</p>
                            <p>2.添加收银员,财务,管理;</p>
                            <p>3.专属门店收款二维码;</p>
                            <p>4.每笔收款到账通知提示;</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-div-end">
                        <div><img width="150" height="150"
                                  src="http://oeb6w1s1c.bkt.clouddn.com/170612174014111298109079.png" alt=""/></div>
                        <div className="joinStoreSuccess-div-end-two">
                            <p>长按识别二维码,来到叮叮来钱</p>
                        </div>
                    </div>
                </div>
            )
        }else if (this.state.userType == 4){
            return (
                <div>
                    <div className="joinStoreSuccess-all-position">
                        <div className="joinStoreSuccess-image-div">
                        </div>
                        <div className="joinStoreSuccess-p">
                            <p>成功入驻叮叮来钱</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-ul">
                        <p className="p-first">您好，{this.state.userName}，您已成功加入公众号“叮叮来钱”。</p>
                        <p className="p-two-success">关注公众号“叮叮来钱”，您可以：</p>
                        <div className="p-inside-div">
                            <p>1.可查看每个店铺每一天的交易收入,流水记录;</p>
                            <p>2.添加收银员,财务;</p>
                            <p>3.专属门店收款二维码;</p>
                            <p>4.每笔收款到账通知提示;</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-div-end">
                        <div><img width="150" height="150"
                                  src="http://oeb6w1s1c.bkt.clouddn.com/170612174014111298109079.png" alt=""/></div>
                        <div className="joinStoreSuccess-div-end-two">
                            <p>长按识别二维码,来到叮叮来钱</p>
                        </div>
                    </div>
                </div>
            )
        }else if(this.state.userType == 2){
            return (
                <div>
                    <div className="joinStoreSuccess-all-position">
                        <div className="joinStoreSuccess-image-div">
                        </div>
                        <div className="joinStoreSuccess-p">
                            <p>成功加入店铺</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-ul">
                        <p className="p-first">您好，{this.state.userName}，您已成功加入你所在店铺"{this.state.shopName}"。</p>
                        <p className="p-two-success">关注公众号“叮叮来钱”，您可以：</p>
                        <div className="p-inside-div">
                            <p>1.每笔收款到账通知提示;</p>
                            <p>2.专属门店的收款二维码; </p>
                            <p>3.查看每一天的交易流水记录;</p>
                        </div>
                    </div>
                    <div className="joinStoreSuccess-div-end">
                        <div><img width="150" height="150"
                                  src="http://oeb6w1s1c.bkt.clouddn.com/170612174014111298109079.png" alt=""/></div>
                        <div className="joinStoreSuccess-div-end-two">
                            <p>长按识别二维码,来到叮叮来钱</p>
                        </div>
                    </div>
                </div>
            )
        }
    }

    render() {
        if (this.state.loading) {
            return (<div className="loading"><span>loading</span></div>)
        } else {
            return (
                <div>
                    {this.DisplayJoinStoreSuccess()}
                </div>
            )
        }
    }
}

export default joinStoreSuccess;

